<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">SelectManyCheckbox</h1>
		<div class="entry">
			<p>SelectManyCheckbox extends standard SelectManyCheckbox with skinning capabilities.</p>

			<h:form id="form">

                <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">

                    <h:outputText value="Line Direction" />
                    <p:selectManyCheckbox id="lineDirection" value="#{formBean.selectedOptions}">
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </p:selectManyCheckbox>
                    
                    <h:outputText value="Page Direction: " />
                    <p:selectManyCheckbox id="pageDirection" value="#{formBean.selectedOptions2}" layout="pageDirection">
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </p:selectManyCheckbox>
                    
                    <h:outputText value="Grid: " />
                    <p:selectManyCheckbox id="grid" value="#{formBean.selectedMovies}" layout="grid" columns="3">
                        <f:selectItems value="#{formBean.movies}" />
                    </p:selectManyCheckbox>


                </h:panelGrid>

                <p:separator />

                <p:commandButton id="submit" value="Submit" update="display" oncomplete="PF('dlg').show()" />

                <p:dialog id="dialog" header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">
                    <p:outputPanel id="display">
                        <p:dataList id="selectedOptions" value="#{formBean.selectedOptions}" var="option">
                            #{option}
                        </p:dataList>
                        <p:dataList id="selectedOptions2" value="#{formBean.selectedOptions2}" var="option2">
                            #{option2}
                        </p:dataList>
                        <p:dataList id="selectedMovies" value="#{formBean.selectedMovies}" var="movie">
                            #{movie}
                        </p:dataList>
                    </p:outputPanel>
                </p:dialog>

			</h:form>

			<h3>Source</h3>
			<p:tabView>
				<p:tab title="selectManyCheckbox.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;

    &lt;h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"&gt;

        &lt;h:outputText value="Line Direction: " /&gt;
        &lt;p:selectManyCheckbox id="lineDirection" value="\#{formBean.selectedOptions}"&gt;
            &lt;f:selectItem itemLabel="Option 1" itemValue="Option 1" /&gt;
            &lt;f:selectItem itemLabel="Option 2" itemValue="Option 2" /&gt;
            &lt;f:selectItem itemLabel="Option 3" itemValue="Option 3" /&gt;
        &lt;/p:selectManyCheckbox&gt;

        &lt;h:outputText value="Page Direction: " /&gt;
        &lt;p:selectManyCheckbox id="pageDirection" value="\#{formBean.selectedOptions2}"
            layout="pageDirection"&gt;
            &lt;f:selectItem itemLabel="Option 1" itemValue="Option 1" /&gt;
            &lt;f:selectItem itemLabel="Option 2" itemValue="Option 2" /&gt;
            &lt;f:selectItem itemLabel="Option 3" itemValue="Option 3" /&gt;
        &lt;/p:selectManyCheckbox&gt;

        &lt;h:outputText value="Grid: " /&gt;
        &lt;p:selectOneRadio id="grid" value="\#{formBean.selectedMovies}" layout="grid" columns="3"&gt;
            &lt;f:selectItems value="\#{formBean.movies}"/&gt;
        &lt;/p:selectOneRadio&gt;

    &lt;/h:panelGrid&gt;

    &lt;p:separator /&gt;

    &lt;p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" /&gt;

    &lt;p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg"&gt;
        &lt;p:outputPanel id="display"&gt;
            &lt;p:dataList value="\#{formBean.selectedOptions}" var="option"&gt;
                \#{option}
            &lt;/p:dataList&gt;

            &lt;p:dataList value="\#{formBean.selectedOptions2}" var="option2"&gt;
                \#{option2}
            &lt;/p:dataList&gt;

            &lt;p:dataList value="\#{formBean.selectedMovies}" var="movie"&gt;
                \#{movie}
            &lt;/p:dataList&gt;
        &lt;/p:outputPanel&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
					</pre>

                    </p:tab>

                    <p:tab title="FormBean.java">
                        <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class FormBean implements Serializable {

    private List&lt;String&gt; selectedMovies;

    private List&lt;String&gt; selectedOptions;
    
    private List&lt;String&gt; selectedOptions2;

    private Map&lt;String,String&gt; movies;

    public FormBean() {
        movies = new HashMap&lt;String, String&gt;();
        movies.put("Scarface", "Scarface");
        movies.put("Goodfellas", "Goodfellas");
        movies.put("Godfather", "Godfather");
        movies.put("Carlito's Way", "Carlito's Way");
        movies.put("The Lord of the Rings", "The Lord of the Rings");
        movies.put("The Avengers", "The Avengers");
    }

    public List&lt;String&gt; getSelectedMovies() {
        return selectedMovies;
    }
    public void setSelectedMovies(List&lt;String&gt; selectedMovies) {
        this.selectedMovies = selectedMovies;
    }

    public List&lt;String&gt; getSelectedOptions() {
        return selectedOptions;
    }
    public void setSelectedOptions(List&lt;String&gt; selectedOptions) {
        this.selectedOptions = selectedOptions;
    }

    public List&lt;String&gt; getSelectedOptions2() {
        return selectedOptions2;
    }
    public void setSelectedOptions2(List&lt;String&gt; selectedOptions2) {
        this.selectedOptions2 = selectedOptions2;
    }

    public Map&lt;String, String&gt; getMovies() {
        return movies;
    }
}
                        </pre>
                    </p:tab>
			</p:tabView>

		</div>

	</ui:define>
</ui:composition>